<template>
  <header>
    <img alt="Vue logo" src="@/assets/flower.svg" width="50" height="50" />

    <div class="input-content">
      <input class="input" placeholder="TO DO LIST" v-model="tag" />
      <button class="btn" @click="onAdd">添加项目</button>
      <button class="btn" @click="onSearch">查找项目</button>
    </div>
  </header>

  <div v-for="target in targets" :key="target.id">
    <Item :item="target" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useList } from "../stores/dailySign";
import Item from "../components/Item.vue";
import type { MyItemType } from "../common/type";

interface MyDataType {
  tag: string;
  targets: MyItemType[];
}

export default defineComponent({
  setup() {
    return {};
  },
  data() {
    return {
      tag: "",
      targets: [],
    } as MyDataType;
  },
  components: {
    Item,
  },
  methods: {
    onAdd() {
      this.cleanSearch();
      const { setList } = useList();
      if (this.tag.trim()) setList(this.tag);
    },
    onSearch() {
      const { searchItem } = useList();
      const _targets = searchItem(this.tag);
      this.targets = _targets || [];
    },
    cleanSearch() {
      this.targets = [];
    },
  },
});
</script>

<style scoped>
.input-content {
  display: flex;
  flex: 1;
}

.input-content .input {
  flex: 1;
}
.btn {
  padding: 10px 15px;
  margin-left: 10px;
  border-radius: 2px;
  border: none;
  background-color: rgba(51, 51, 51, 1);
  cursor: pointer;
  color: white;
}

.btn:hover,
.btn:active {
  background-color: rgba(51, 51, 51, 0.8);
}
</style>
